﻿@{
    ViewBag.PageTitle = ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<!--新闻资讯.开始-->
<div class="news-focus wrapper">
    <div class="banner">
        <div class="news-index-container swiper-container">
            <div class="swiper-wrapper">
                <a v-for="(item,index) in focusList" :key="index" class="swiper-slide" :href="'/news/show/'+item.id">
                    <div class="img-box">
                        <img :src="common.loadFile(item.imgUrl)">
                    </div>
                    <div class="txt-box">
                        <span>{{item.title}}</span>
                    </div>
                </a>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="img-list">
        <div class="picture-list">
            <a v-for="(item,index) in newsList" :key="index" v-if="index<2" class="list-box" :href="'/news/show/'+item.id">
                <div class="img-box">
                    <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                </div>
                <div class="txt-box">
                    <span class="text">{{item.title}}</span>
                </div>
            </a>
        </div>
    </div>
    <div class="txt-list">
        <div class="ftitle">
            <span class="h5">热点新闻</span>
            <a href="~/news" class="more link">
                <span class="icon iconfont icon-right-arrow"></span>
            </a>
        </div>
        <a v-for="(item,index) in newsList" :key="index" v-if="index>=2" class="list-box" :href="'/news/show/'+item.id">
            <div class="title"><span class="label">{{item.labelTitle.split(',')[0]}}</span>{{item.title}}</div>
            <div class="info">
                <span>{{item.addTime}}</span>
                <span class="line">{{item.source}}</span>
            </div>
        </a>
    </div>
</div>
<!--新闻资讯.结束-->
<!--视频中心.开始-->
<div class="wrapper">
    <div class="ntitle">
        <div class="h3">视频中心</div>
        <a href="~/video" class="more">
            <span>更多</span>
            <span class="icon iconfont icon-right-arrow"></span>
        </a>
    </div>
    <div class="video-index">
        <div class="left-box">
            <a v-for="(item,index) in videoList" :key="index" v-if="index===0" class="item-box" :href="'/video/show/'+item.id">
                <div class="img-box">
                    <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                </div>
                <div class="txt-box">
                    <span class="icon iconfont icon-play"></span>
                    <span class="text">{{item.title}}</span>
                </div>
            </a>
        </div>
        <div class="right-box">
            <div class="picture-list">
                <a v-for="(item,index) in videoList" :key="index" v-if="index>=1" class="list-box" :href="'/video/show/'+item.id">
                    <div class="img-box">
                        <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                    </div>
                    <div class="txt-box">
                        <span class="icon iconfont icon-play"></span>
                        <span class="text">{{item.title}}</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--视频中心.结束-->
<!--图片分享.开始-->
<div class="wrapper">
    <div class="ntitle">
        <div class="h3">图片分享</div>
        <a href="~/photo" class="more">
            <span>更多</span>
            <span class="icon iconfont icon-right-arrow"></span>
        </a>
    </div>
    <div class="photo-list">
        <div v-for="(item,index) in photoList" :key="index" class="list-box" @@click="common.linkUrl('/photo/show/'+item.id)">
            <div class="img-box">
                <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
            </div>
            <div @@click.stop="updateLike(item)" class="like-box">
                <span class="icon iconfont icon-good-full"></span>
                <span class="text">{{item.likeCount}}</span>
            </div>
            <div class="txt-box">
                <span class="title">{{item.title}}</span>
                <span class="date iconfont icon-date">{{item.addTime}}</span>
            </div>
        </div>

    </div>
</div>
<!--图片分享.结束-->
<!--资源下载.开始-->
<div class="wrapper">
    <div class="ntitle">
        <div class="h3">资源下载</div>
        <a href="~/down" class="more">
            <span>更多</span>
            <span class="icon iconfont icon-right-arrow"></span>
        </a>
    </div>
    <div class="down-list">
        <a v-for="(item,index) in downList" :key="index" class="list-box" :href="'/down/show/'+item.id">
            <div class="img-box">
                <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
            </div>
            <div class="txt-box">
                <span class="title">{{item.title}}</span>
                <span class="info">{{item.zhaiyao}}</span>
                <div class="date">
                    <span class="icon iconfont icon-date">{{item.addTime}}</span>
                    <span class="icon iconfont icon-view">{{item.click}}次</span>
                </div>
            </div>
        </a>

    </div>
</div>
<!--资源下载.结束-->

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                searchType: 0,
                focusList: [], //新闻幻灯
                newsList: [], //新闻列表
                videoList: [], //视频列表
                photoList: [], //图片列表
                downList: [], //下载列表
            },
            methods: {
                //初始化数据
                async initData() {
                    let _this = this;
                    //新闻幻灯片
                    AxiosAjax({
                        url: `/client/article/view/channel/news/5?labelId=4&siteId=${$site}`,
                        success: function (res) {
                            _this.focusList = res.data;
                            _this.$nextTick(() => {
                                _this.initSwiper();
                            });
                        }
                    });
                    //新闻列表
                    AxiosAjax({
                        url: `/client/article/view/channel/news/7?siteId=${$site}`,
                        success: function (res) {
                            _this.newsList = res.data;
                        }
                    });
                    //视频列表
                    AxiosAjax({
                        url: `/client/article/view/channel/video/5?siteId=${$site}`,
                        success: function (res) {
                            _this.videoList = res.data;
                        }
                    });
                    //图片列表
                    AxiosAjax({
                        url: `/client/article/view/channel/photo/4?siteId=${$site}`,
                        success: function (res) {
                            _this.photoList = res.data;
                        }

                    });
                    //下载列表
                    AxiosAjax({
                        url: `/client/article/view/channel/down/4?siteId=${$site}`,
                        success: function (res) {
                            _this.downList = res.data;
                        }
                    });
                },
                //初始化幻灯片
                initSwiper() {
                    new Swiper('.news-index-container', {
                        autoplay: true,//可选选项，自动滑动
                        loop: true, //循环模式选项
                        observer: true, //检测变化
                        //如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                },
                //文章点赞
                updateLike(item) {
                    AxiosAjax({
                        url: `/client/article/like/${item.id}`,
                        method: "put",
                        success: function (res) {
                            item.likeCount = res.data;
                        }
                    });
                },
            },
            created() {
                this.initData();

            },
            mounted() {

            },
        })
    </script>
}